<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">

</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>



<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="服务查询"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">

            <span>全部人员信息</span>
            <span>客服id</span>
            <input type="text"  class="form-control" id="WorkerID" placeholder="请输入客服的代号" aria-describedby="sizing-addon1" >
            <button onclick="deleteWorker()" type="button" class="form-control_button">删除员工</button>

        </ul>
    </div>


</div>



<div id="userDetails" class="user-details"></div>

<div id="workersList"></div>

<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>

    function deleteWorker() {
        var WorkerID = document.getElementById("WorkerID").value;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/deleteWorker?WorkerID=" + WorkerID , true);
        alert("删除成功");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var deleteworker = JSON.parse(xhr.responseText);
                alert("删除的员工信息");
                alert(xhr.responseText);
            }
        };
        xhr.send();
    }






    function displayAllWorkers() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/AllWorkers", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var workers = JSON.parse(xhr.responseText);
                    displayWorkersList(workers);
                } else {

                    alert("Failed to fetch workers.");

                }
            }
        };
        xhr.send();
    }

    function displayWorkersList(workers) {
        var workersListDiv = document.getElementById("workersList");
        var html = "<table class='workers-table'>";
        // 表头
        html += "<tr>";
        html += "<th>工号（ID）</th>";
        html += "<th>姓名（Name）</th>";
        html += "<th>密码（Password）</th>";
        html += "<th>联系方式（Contact Number）</th>";
        html += "<th>评分（Rating）</th>";
        html += "<th>薪水（Salary）</th>";
        html += "</tr>";

        // 遍历每个工作人员并添加到表格中
        workers.forEach(function(worker) {
            html += "<tr>";
            html += "<td>" + worker.customerServiceID + "</td>";
            html += "<td>" + worker.name + "</td>";
            html += "<td>" + worker.password + "</td>";
            html += "<td>" + worker.contactNumber + "</td>";
            html += "<td>" + worker.rating + "</td>";
            html += "<td>" + worker.salary + "</td>";
            html += "</tr>";
        });

        html += "</table>";
        workersListDiv.innerHTML = html;
    }

    // 在页面加载完成后调用 displayAllWorkers 函数来获取并展示全部的 worker 列表
    window.onload = function() {
        displayAllWorkers();
    };
</script>
</body>
</html>